<template>
  <div class="data-dashboard">
    <div style="background-color: #fff;padding-top: 20px;">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-row :gutter="22" style="margin: 0">
          <el-col :span="20">
            <el-form-item label="日期">
              <el-date-picker
                v-model="dateRange"
                size="small"
                style="width: 240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                clearable
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="景区名称" prop="status">
              <el-input
                prefix-icon="el-icon-search"
                v-model="queryParams.userName"
                placeholder="景区名称"
                clearable
                style="width: 240px"
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2" >
            <el-form-item>
              <el-button  :style="{color: '#3370ff', borderColor: '#3370ff'}" size="mini" @click="handleQuery">查询</el-button>
              <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>

    <div class="data-dashboard-top">
      <div class="top-item">
        <div class="data-dashboard-title">
          今日游客数量（人次）
        </div>
        <div class="data-dashboard-num">
          {{numberChangeString(dataObj1.today)}}
        </div>
        <div class="rate-box">
          <div class="rate-item">
            <div class="label">同比</div>
            <div class="value" :style="{color: dataObj1.yesterday < 0 ? '#009013': '#FE5454'}">{{dataObj1.yesterday}}%</div>
          </div>
          <div class="rate-item">
            <div class="label">环比</div>
            <div class="value" :style="{color: dataObj1.yesterday < 0 ? '#009013': '#FE5454'}">{{dataObj1.yesterday}}%</div>
          </div>
        </div>
        <div class="data-dashboard-title img-title">
          <img :src="number" alt=""> 昨日游客数量：{{numberChangeString(dataObj1.yesterday)}}
        </div>
      </div>

      <div class="top-item">
        <div class="data-dashboard-title">
          游客画像（人次）
        </div>
        <div class="user-box">
          <div class="user-box-item">
            <div class="img-box">
              <img :src="man" alt="">
            </div>
            <div class="img-box-right">
              <div class="data-dashboard-title">男性</div>
              <div class="data-dashboard-num">{{dataObj2.count1}}</div>
              <div class="rate-item">
                <div class="label">占比</div>
                <div class="value" :style="{color: dataObj2.rate1 < 0 ? '#009013': '#FE5454'}">{{dataObj2.rate1}}%</div>
              </div>
            </div>
          </div>
          <div class="user-box-item">
            <div class="img-box">
              <img :src="woman" alt="">
            </div>
            <div class="img-box-right">
              <div class="data-dashboard-title">女性</div>
              <div class="data-dashboard-num">{{dataObj2.count2}}</div>
              <div class="rate-item">
                <div class="label">占比</div>
                <div class="value" :style="{color: dataObj2.rate2 < 0 ? '#009013': '#FE5454'}">{{dataObj2.rate2}}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="top-item">
        <div class="data-dashboard-title">
          游客消费（元）
        </div>
        <div class="data-dashboard-num">
          {{numberChangeString(dataObj3.today)}}
        </div>
        <div class="rate-box">
          <div class="rate-item">
            <div class="label">同比</div>
            <div class="value" :style="{color: dataObj3.yesterday < 0 ? '#009013': '#FE5454'}">{{dataObj3.yesterday}}%</div>
          </div>
          <div class="rate-item">
            <div class="label">环比</div>
            <div class="value" :style="{color: dataObj3.yesterday < 0 ? '#009013': '#FE5454'}">{{dataObj3.yesterday}}%</div>
          </div>
        </div>
        <div class="data-dashboard-title img-title">
          <img :src="number" alt=""> 昨日游客消费：{{numberChangeString(dataObj3.yesterday)}}
        </div>
      </div>

      <div class="top-item" style="margin-right: 0;">
        <div class="data-dashboard-title">
          热门旅游{{ active === 1 ? '店铺' : '商品'}}top3
          <div class="data-dashboard-title-right">
            <div :class='{active: active === 1}' @click="changeActive(1)">店铺</div>
            <!-- <div :class='{active: active === 2}' @click="changeActive(2)">商品</div> -->
          </div>
        </div>
        <div class="top-num-item" v-for="item, index in topList" :key="index">
          <div class="icon">{{index + 1}}</div>
          <div class="label" style="flex: 3">{{item.qiyeName}}</div>
          <div class="label">￥{{numberChangeString(item.price)}}</div>
          <div class="top-rate" :style="{color: item.rate >= 0 ? '#F5222D': '#52C41A'}">
            {{item.rate}}%
            <i v-if="item.rate >= 0" class="el-icon-caret-top"></i>
            <i v-else class="el-icon-caret-bottom"></i>
          </div>
        </div>
      </div>

    </div>

    <div class="chart-box">
      <div class="left-chart">
        <div class="data-dashboard-title">热门景区排名（人次）</div>
        <div id="barChart"></div>
      </div>
      <div class="right-chart">
        <div class="data-dashboard-title">游客消费类型分析</div>
        <div id="pieChart"></div>
      </div>
    </div>

  </div>
</template>

<script>

import {
  commodityTop,
  consumeType,
  viewRank,
  consumePortrait,
  consumeFn,
  personNum,
} from '@/api/dataAnalysis/dashboard';
import * as Echarts from 'echarts';
import number from '@/assets/analysis/number.png';
import man from '@/assets/analysis/man.png';
import woman from '@/assets/analysis/woman.png';

  export default {
    name:'',
    props:[''],
    data () {
      return {
        man,
        number,
        woman,
        active: 1,
        dataObj1: {
          qoq: 0,
          today: 0,
          yesterday: 0,
        },
        topList: [],
        dataObj2: {
            rate1: 0,
            rate2: 0,
            count1: 0,
            count2: 0,
        },
        dataObj3: {
          qoq: 0,
          today: 0,
          yesterday: 0,
        },
        barChartList: [
          {
            label: '万佛湖',
            value: 800
          },
          {
            label: '万佛山',
            value: 10000
          },
          {
            label: '新四军皖西革命纪念馆',
            value: 13000
          },
          {
            label: '毛主席视察舒茶纪念馆',
            value: 26000
          },
          {
            label: '飞霞公园',
            value: 9000
          },
        ],
        dateRange: [],
        pieChartList: [
          {
            name: '游览',
            value: 0
          },
          {
            name: '餐饮',
            value: 0
          },
          {
            name: '住宿',
            value: 0
          },
          {
            name: '其他',
            value: 0
          },
        ],
        barChart: undefined,
        pieChart: undefined,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          dateRange: undefined,
          userName: undefined,
        },

      };
    },

    components: {},

    computed: {},

    created() {},

    beforeDestroy() {
      window.removeEventListener('resize', this.eventListener);
      this.barChart?.dispose();
      this.pieChart?.dispose();
      this.barChart = undefined;
      this.pieChart = undefined;
    },

    mounted() {
      this.barChart = Echarts.init(document.getElementById('barChart'));
      this.pieChart = Echarts.init(document.getElementById('pieChart'));
      window.addEventListener('resize', this.eventListener);
      this.dataChange()
    },

    methods: {
      dataChange () {
        let obj = {
          // startDate: this.dateRange?.[0] || undefined,
          // endDate: this.dateRange?.[1] || undefined,
          startDate: '2023-11-20',
          endDate: '2023-11-30',
        };
        this.personNumFn(obj)
        this.consume(obj)
        this.consumePortraitFn(obj)
        this.commodityTopFn(obj)
        this.viewRankFn(obj)
        this.consumeTypeFn(obj)
      },
      personNumFn(data) {
        personNum(data).then((res) => {
          this.dataObj1 = res?.data || {}
        });
      },
      consumePortraitFn(data) {
        consumePortrait(data).then((res) => {
          this.dataObj2 = {
            rate1: res?.data?.rate?.[0] || 0,
            rate2: res?.data?.rate?.[1] || 0,
            count1: res?.data?.count?.[0] || 0,
            count2: res?.data?.count?.[1] || 0,
          }
        });
      },
      consume(data) {
        consumeFn(data).then((res) => {
          this.dataObj3 = res?.data || {}
        });
      },
      commodityTopFn(data) {
        commodityTop(data).then((res) => {
          this.topList = res?.data || []
        });
      },
      viewRankFn(data) {
        viewRank(data).then((res) => {
          this.barChartList = res?.data?.map(item => {
            return {
              label: item.jingquName,
              value: item.userCount,
            }
          })
          this.barChartFn();
          // this.dataObj2 = res?.data || {}
        });
      },
      consumeTypeFn(data) {
        consumeType(data).then((res) => {
          console.log(res);
          let data = res?.data || {};
          this.pieChartList = this.pieChartList.map((item,index)=> {
            return {
              ...item,
              value: index === 0 ? Number(data?.youwanPrice || 0) : index === 1 ? Number(data?.canyinPrice || 0) :
                      index === 2 ? Number(data?.zhusuPrice || 0) : Number(data?.qitaPrice || 0)
            }
          })
          this.pieChartFn()
        });
      },
      changeActive(active) {
        if (this.active === active) return ;
        this.active = active;
      },
      handleQuery() {
        this.dataChange()
      },

      numberChangeString (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num ? num.toString().replace(reg, ',') : '0';
      },
      barChartFn () {
        let option = {
          legend: false,
          grid: {
            left: "3%",
            right: "4%",
            bottom: "10%",
            containLabel: true,
          },

          tooltip: {
            show: "true",
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#000000",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#aaa",
                type: 'dashed'
              },
            },
          },
          xAxis: [
            {
              type: "category",
              axisTick: {
                show: true,
                lineStyle: {
                  color: "#000000",
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#000000",
                },
              },
              data: this.barChartList?.map(item => item.label),
            },
          ],
          series: [
            {
              name: "热门景区",
              type: "bar",
              barWidth: "20%",
              itemStyle: {
                normal: {
                  show: true,
                  color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#1890FF",
                    },
                    {
                      offset: 1,
                      color: "#35C3FF",
                    },
                  ]),
                  borderWidth: 0,
                  // borderColor: "#333",
                },
              },
              label: {
                normal: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
              barGap: "100%",
              data: this.barChartList?.map(item => item.value),
            },
          ],
        };
        this.barChart.setOption(option, true);
      },
      pieChartFn () {
          let color = [
            "#975FE5",
            "#F2637B",
            "#FBD437",
            "#3BA1FF",
          ];
          let xdata = this.pieChartList.map(item => item.name)
          let ydata = this.pieChartList.map(item => item.value)
          let sum = ydata.reduce((a, b) => a + b, 0)

          let option = {
            color,
            tooltip: {
              show: true,
              trigger: "item",
            },
            legend: {
              orient: "vartical",
              top: "center",
              right: "20%",
              bottom: "0%",
              itemWidth: 8,
              itemHeight: 8,
              itemGap: 16,
              formatter:(name) => {
                console.log(name);
                let obj = this.pieChartList?.filter(item => item.name === name)?.[0];
                let val = this.numberChangeString(obj.value)
                return `{name|${name}}{value|￥${val}}{rate|${ (obj.value/sum * 1000).toFixed(0)/10}%}`
              },
              textStyle: {
                rich: {
                  name: {
                    width: 100,
                  },
                  value: {
                    width: 100,
                  },
                }
              },

              // formatter: function (name) {
              //   return "" + name;
              // },
            },
            series: [
              {
                type: "pie",
                clockwise: false, //饼图的扇区是否是顺时针排布
                minAngle: 2, //最小的扇区角度（0 ~ 360）
                radius: ["55%", "70%"],
                center: ["30%", "50%"],
                avoidLabelOverlap: false,
                itemStyle: {
                  //图形样式
                  normal: {
                    borderColor: "#ffffff",
                    borderWidth: 6,
                  },
                },
                label: {
                  normal: {
                    show: true,
                    position: "center",
                    formatter: `{text|销售额(元)}\n{num|${this.numberChangeString(sum)}}`,
                    rich: {
                      text: {
                        color: "#8C8C8C",
                        fontSize: 20,
                        align: "center",
                        verticalAlign: "middle",
                        padding: 8,
                      },
                      num: {
                        color: "#262626",
                        fontSize: 36,
                        fontWeight: 'bold',
                        align: "center",
                        verticalAlign: "middle",
                        padding: 8,
                      },
                    },
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: 24,
                    },
                  },
                },
                data: this.pieChartList,
              },
            ],
          };
          this.pieChart.setOption(option, true);

      },
      eventListener () {
        this.barChart?.resize();
        this.pieChart?.resize();
      },

    },

  }

</script>
<style lang='scss' scoped>
.data-dashboard {
  background-color: var(--theme_bg_color);
  height: 100%;
  // width: 100%;
  .data-dashboard-top {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    .top-item {
      background-color: #fff;
      margin-right: 20px;
      padding: 16px;
      flex: 1;
      height: 165px;
      >div:nth-of-type(1) {
        margin-bottom: 10px;
      }
      .rate-box{
        padding-bottom: 12px;
        border-bottom: 1px dashed #BFBFBF;
        display: flex;
        margin: 10px 0;
        .rate-item {
          flex: 1;
        }
      }
      .user-box {
        display: flex;
        .user-box-item {
          flex: 1;
          display: flex;
          .img-box {
            margin-right: 6px;
          }
          .img-box-right {
            .rate-item {
              margin-top: 30px;
            }
          }
        }
      }
      .top-num-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        .icon {
          width: 20px;
          height: 20px;
          margin: 0;
          margin-right: 10px;
          border-radius: 50%;
          background-color: #399FFF;
          color: #fff;
          font-size: 12px;
          text-align: center;
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          line-height: 20px;
        }
        .label {
          flex: 2;
        }
        .top-rate {
          flex: 1;
        }
      }
    }
  }
  .data-dashboard-title, .label, .value {
    height: 20px;
    font-size: 14px;
    font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
    font-weight: 400;
    color: #111111;
    line-height: 20px;
  }
  .data-dashboard-title {
    position: relative;
    .data-dashboard-title-right {
      display: flex;
      position: absolute;
      right: 16px;
      top: 0px;
      background: #EFEFEF;
      border-radius: 11px ;
      overflow: hidden;
      color: #3AA0FF;
      >div {
        height: 22px;
        font-size: 14px;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        line-height: 22px;
        padding: 0 10px ;
        cursor: pointer;
      }
      .active {
        background: #3AA0FF;
        color: #fff;
        border-radius: 11px;
      }
    }
  }
  .img-title {
    display: flex;
    align-items: center;
    img {
      margin-right: 10px;
    }
  }
  .chart-box{
    display: flex;
    justify-content: space-between;
    .data-dashboard-title {
      padding: 16px;
    }
    .left-chart {
      margin-right: 20px;
      flex: 1;
      background-color: #fff;
    }
    .right-chart {
      flex: 1;
      background-color: #fff;
    }
    #barChart, #pieChart {
      height: 550px;
    }
  }
  .rate-item {
    display: flex;
  }
  .value {
    font-size: 16px;
    margin-left: 16px;
  }
  .data-dashboard-num {
    height: 32px;
    font-size: 24px;
    font-family: HarmonyOS Sans SC-Bold, HarmonyOS Sans SC;
    font-weight: 700;
    color: #333333;
    line-height: 32px;
  }
}
</style>
